<template>
	<view>
		<view class="box" style="padding-top: 204rpx;">
			<view class="top_menu_fix">
				<view class="pl24 pr24">
					<view class="flex_box aic">
						<view class="item ">
							<view class="re">
							
								<input v-model="keywords" type="text" class="search_ipt_sty" placeholder-style="color: #999;"
									placeholder="请输入IMEI或序列号" />
									<!-- @click="sao()" -->
								<image
									src="https://offer-1318401590.cos.ap-guangzhou.myqcloud.com/mpstatus/phs/icon_search_4.png"
									class="icon_search_pos"></image>
									
							</view>
						
						</view>
						<view @click="getInfo()" class="sousuo-btn">
							搜索
						</view>
						<!-- <image src="https://offer-1318401590.cos.ap-guangzhou.myqcloud.com/mpstatus/phs/icon_saoyisao.png" class="ml30 img3"></image> -->
					</view>
				</view>
				<view class="pt45 pb40 flex_box aic pr30 pl30">
					<view class="item">
						<view class="fs32 fwb">历史记录</view>
					</view>
					<view class="fs24 cor_999">长按结果复制</view>
				</view>
				<view v-if="false" class="screen_box bb1">
					<view class="flex_box aic">
						<view class="item">
							<view class="screen_item df aic jcc">
								<view>默认</view>
								<image
									src="https://offer-1318401590.cos.ap-guangzhou.myqcloud.com/mpstatus/phs/icon_arw_01.png"
									class="ml10 img12"></image>
							</view>
						</view>
						<view class="item">
							<view class="screen_item df aic jcc">
								<view>全部</view>
								<image
									src="https://offer-1318401590.cos.ap-guangzhou.myqcloud.com/mpstatus/phs/icon_arw_01.png"
									class="ml10 img12"></image>
							</view>
						</view>
						<view class="item">
							<view class="screen_item df aic jcc">
								<view>日期</view>
								<image
									src="https://offer-1318401590.cos.ap-guangzhou.myqcloud.com/mpstatus/phs/icon_arw_01.png"
									class="ml10 img12"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="pl24 pr24">
<view  v-show="data.list.length <= 0" style="margin-top: 25vh;">
	<u-empty  text="暂无任何 查询数据" mode="list"></u-empty>
	
</view>


				<view @longpress="copy(index)" class="area_1" v-for="(item,index) in data.list" :key="index">


					<view  v-for="(val,key) in item.result" :key="key" class="pt10 pb10 lh42 flex_box aic mb5">
						<view class="w160 fs28 fwb">{{val.key}}：</view>
						<view class="item">
							<view class="fs28">{{val.value}}</view>
						</view>
					</view>


				</view>

				<!-- <view class="mt40 mb40 fs24 cor_ccc tac">-没有更多数据了-</view> -->

			</view>


		</view><!-- box -->
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow, onPageScroll, onShareAppMessage } from '@dcloudio/uni-app'
	import { reactive, ref } from 'vue'
	import { searchLog} from '@/api/idsearch'
	
	
	const data = ref({list:[]});
	const keywords = ref("");
	
	const copy = (index:any) => {
		
		let item = data.value.list[index] || [];
		
		let str = "";
		item.result.forEach(i => {
			str +=   `${i.key}：${i.value}\n\r`
		});
		
		// let str = "asdasdasd";
		uni.setClipboardData({
			data: str.toString(),
			success() {
				// #ifdef MP-TOUTIAO
				uni.showToast({
					title: "复制成功",
				})
				// #endif
			}
		})
	}
	
	
	onShow(() => {
		getInfo();
	})
	
	//获取信息
	const getInfo = async () => {
		data.value = await searchLog({keywords:keywords.value});
		
	}
	
	
</script>

<style>
	page {
		background: #fff;
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
		overflow-x: hidden;
	}

	.sousuo-btn {
		margin-left: 30rpx;
		width: 120rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient(180deg, rgba(255,73,7,.6) 0%, rgba(255,73,7,1) 100%);
		border-radius: 6rpx;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
	}

	.area_1 {
		position: relative;
		padding: 36rpx 40rpx 20rpx;
		background: #FAFAFA;
		border-radius: 8rpx;
		border: 1rpx dotted #FF4907;
		margin-top: 30rpx;
	}

	.top_menu_fix {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding-top: 26rpx;
		background: #fff;
		z-index: 3;
	}

	.search_ipt_sty {
		position: relative;
		display: inline-block;
		width: 100%;
		height: 72rpx;
		line-height: 72rpx;
		font-size: 28rpx;
		color: #333;
		padding: 0 25rpx 0 81rpx;
		background: #F2F2F2;
		border: 0;
		border-radius: 0;
		border-radius: 8rpx;
		outline: none;
	}

	.icon_search_pos {
		position: absolute;
		top: 50%;
		left: 24rpx;
		width: 32rpx;
		height: 32rpx;
		z-index: 2;
		transform: translateY(-50%);
	}

	.screen_box .screen_item {
		height: 104rpx;
		font-size: 28rpx;
		color: #333;
		text-align: center;
	}

	.tags_sty {
		display: inline-block;
		padding: 0 25rpx;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 24rpx;
		color: #fff;
		background: #279bff;
		border-radius: 8rpx;
	}

	.w160 {
		width: 160rpx;
	}

	.img3 {
		width: 48rpx;
		height: 48rpx;
	}

	.img12 {
		width: 16rpx;
		height: 8rpx;
	}

	.pl24 {
		padding-left: 24rpx;
	}

	.pr24 {
		padding-right: 24rpx;
	}

	.lh42 {
		line-height: 42rpx;
	}

	.bb1 {
		border-bottom: 2rpx solid #F2F2F2;
	}
</style>